<%--
  Created by IntelliJ IDEA.
  User: zjsxx
  Date: 2018/1/25
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/form_validate.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:15 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>EasyLink 新用户注册</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">


    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=lhynbQH5Ke8q8H4bGGGeuXbRAXyfblMV"></script>


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>新增设备 </h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="deviceForm">
                        <%--设备名--%>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">设备名：</label>
                            <div class="col-sm-8">
                                <input id="deviceName" name="deviceName" class="form-control" type="text">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 为您的智能设备取一个名字</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">设备描述：</label>
                            <div class="col-sm-8">
                                <textarea id="desc" name="desc" class="form-control" rows="3" cols="20"></textarea>
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请描述一下您的设备</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">位置信息：</label>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <div class="input-group-addon">经度</div>
                                    <input value="121.570357" type="text" class="form-control" id="longitude"
                                           name="longitude"
                                           placeholder="设备经度" readonly>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <div class="input-group-addon">纬度</div>
                                    <input value="29.824434" type="text" class="form-control" id="latitude"
                                           name="latitude"
                                           placeholder="设备维度" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-8">
                                <div id="allmap" style="width: 100%;height: 300px"></div>
                            </div>
                            <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-5">
                                <div id="r-result">
                                    <input class="form-control" id="cityName" type="text"
                                           style="width:100%; margin-right:10px;"/>

                                </div>
                            </div>
                            <div class="col-sm-4"><input class="btn btn-primary" type="button" value="查询"
                                                         onclick="theLocation()"/></div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">公开情况：</label>
                            <div class="col-sm-8">

                                <div class="radio i-checks ">
                                    <label class="checkbox-inline">
                                        <input type="radio" value="0" name="personal"> <i></i> 不公开</label>
                                </div>
                                <div class="radio i-checks">
                                    <label class="checkbox-inline">
                                        <input id="isPersonal" type="radio" checked="" value="1" name="personal">
                                        <i></i>
                                        公开</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">标签：</label>
                            <div class="col-sm-8">
                                <input id="tag" name="desc" class="form-control">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 标签间请用,分隔</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button id="subBtn" class="btn btn-primary" type="button">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-1"></div>
    </div>
</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/content.min.js?v=1.0.0"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/messages_zh.min.js"></script>
<script src="/js/demo/form-validate-device.min.js"></script>
<script src="/js/jquery.json.js"></script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script src="/js/plugins/iCheck/icheck.min.js"></script>
<script>
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(121.57033, 29.824382);
    map.clearOverlays();

    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 18);

    map.addEventListener("click", function (e) {
        var input = document.getElementById('longitude');
        var input2 = document.getElementById('latitude');
        input.value = e.point.lng;
        input2.value = e.point.lat;
        map.clearOverlays();
        var point = new BMap.Point(e.point.lng,e.point.lat);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
    });


    map.addControl(new BMap.NavigationControl());


    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map}
    });

    function theLocation() {
        var city = document.getElementById("cityName").value;
        if (city != "") {
            local.search(city);
        }
    }

    $(document).ready(function () {
        $('#subBtn').click(function () {

                var name;
                var desc;
                var longitude;
                var latitude;
                var tag;
                var personal;
                var check = $('#deviceForm').valid()


                //检测表单是否可以提交
                if (check) {
                    var key = null;
                    var v = document.cookie.split(";");
                    for (var i = 0; i < v.length; i++) {
                        var item = v[i].split("=");
                        if (item[0] == 'easylink_user_token') {
                            key = item[1];
                            break;
                        }
                    }
                    //数据获取
                    name = $('#deviceName').val();
                    desc = $('#desc').val();
                    longitude = $('#longitude').val();
                    latitude = $('#latitude').val();
                    var reg = /，/g;
                    var reg2 = /,/g;
                    tag = $('#tag').val();
                    tag = tag.replace(reg, '#');
                    tag = tag.replace(reg2, '#');
                    personal = ($('#isPersonal').is(":checked")) ? 1 : 0;
                    console.log(personal)
                    //发送ajax请求
                    $.ajax({
                        type: 'POST',
                        headers: {
                            'easylink_user_token': key
                        },
                        url: '/device/insert',
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8",
                        data: $.toJSON({
                            "name": name,
                            "desc": desc,
                            "longitude": longitude,
                            "latitude": latitude,
                            "tag": tag,
                            "personal": personal

                        }),
                        success: function (message) {
                            if (message.status == 200) {
                                alert('新增设备成功');
                                $(location).attr('href', '/userManager/driverList');
                            } else {
                                console.log(message);
                                alert('新增设备失败:' + message.msg);
                            }
                        },
                        error: function (message) {
                            console.log(message);
                        }
                    });
                }
            }
        );
    });
</script>
</body>
</html>
